<template>
  <el-container>
    <el-main>
      <el-table :data="tableData" style="width: 100%">

        <el-table-column label="编号" prop="did">
        </el-table-column>

        <el-table-column label="菜名" prop="dishName">
        </el-table-column>

        <el-table-column label="价格" prop="menuPrice">
        </el-table-column>

        <el-table-column label="状态" align="center" prop="menuState">
          <template v-slot="scope">
            <p v-if="scope.row.menuState=='1'">有产品</p>
            <p v-if="scope.row.menuState=='0'">无产品</p>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="add(scope.row)">加入++</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <!--
          size-change:下拉框选中事件触发的函数
          current-change：页码和上一页、下一页触发的事件
          current-page：当前页的页码
          page-sizes：下拉框选中行数集合
          page-size：每页显示条数
          layout：分页页面布局
          total：总条数
        -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="paramsData.page" :page-sizes="[5, 10, 15, 100]" :page-size="paramsData.row"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>

      <div>
        <el-badge v-model="car" class="item">
          <el-button size="small" @click="showCar">购物车</el-button>
        </el-badge>
      </div>

      <el-dialog :title="title" :visible.sync="isShow">
        <!-- 表单组件-->
      <el-form>
        <el-form-item>
          <el-table :data="listCar" label-width="100px">
            <el-table-column label="编号" prop="did">
            </el-table-column>

            <el-table-column label="菜名" prop="dishName">
            </el-table-column>

            <el-table-column label="价格" prop="menuPrice">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="del(scope.row)">取消--</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <template slot-scope="scope">
            <el-button @click="submitCar">提交</el-button>

            <el-button @click="back">返回</el-button>
          </template>
        </el-form-item>
      </el-form>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    data() {
      return {

        listCar: [],
        tableData: [],
        total: 0, //总条数
        totalPage: "", //总页数
        paramsData: {
          page: 1,
          row: 5
        },
        car: 0,
        isShow: false,
        title: ""
      }
    },
    methods: {

      submitCar(){
        var self=this;
        var allDishName="";
        var total=0;
        for (var i = 0; i < self.listCar.length; i++) {
          allDishName+=self.listCar[i].dishName+",";
          total+=self.listCar[i].menuPrice;
        }
        console.log(allDishName);//传输的字符串菜品名
        console.log(total);//传输的菜品总价
        console.log(self.listCar);

        this.$http.post("/order/addOrder",this.$qs.stringify({
          "dishName":allDishName,
          "total":total
        })

        ).then(function(res){
         self.$message(res.data.info) //成功的提示
        self.listCar=[];//成功后清空购物车
        self.car=0;//红标数字清零
        self.isShow=false;//关闭弹框
        }).catch(function(res){
          self.$message("购物车提交失败");
        })
      },

      back(){
        var self=this;
        self.isShow=false;
      },

      showCar() {
        var self = this;
        self.title = "购物车"
        self.isShow = true;
      },

      del(row) {
        var self = this;
        console.log("进行取消操作");
        var index = 0;
        self.listCar.findIndex(item => {
          if (item.id = row.did) {
            return true;
          }
        });
        self.listCar.splice(index, 1);
        self.car--;
        if (self.listCar.length == 0) {
          self.isShow=false;
        }
      },

      add(row) {
        var self = this;
        if (row != null) {
          self.car++;
          self.listCar.push(row);
        }
        console.log("用户的信息：" + row);
      },

      querymessage() {
        var self = this;
        this.$http.get("/menu/queryMenuByPage", {
          params: this.paramsData,
        }).then(function(res) {
          self.$message(res.data.info);
          //赋值当前页
          self.tableData = res.data.data.list;
          //赋值总条数
          self.total = res.data.data.total;
          //赋值总页数
          self.totalPage = res.data.data.totalPage;
          console.log(self.tableData);
        }).catch(function(res) {
          self.$message("服务器连接错误");
        })
      },

      handleSizeChange(row) { //下拉框触发事件
        this.paramsData.row = row;
        //刷新
        this.querymessage();
      },

      handleCurrentChange(page) { //页码触发事件
        this.paramsData.page = page;
        this.querymessage();
      }

    },
    mounted() {
      this.querymessage();
    }
  }
</script>
